<template>
  <div class="main">
    <div class="tab-list">
      <template v-for="tab in tabs">
        <div class="tab">
          <router-link :to="`/${tab.path}`">{{tab.beta.title}}</router-link>
        </div>
      </template>
    </div>

    <div class="show-box">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import tabs from 'assets/tabs'
export default {
  data () {
    return {
      tabs
    }
  }
}
</script>

<style lang="stylus" scoped>
.main
  width 100%
  height 100%
  .tab-list
    margin 10px 20px
    width 100%
    display flex
    flex-direction row
    .tab
      padding 4px
      margin 0 4px
      border-radius 2px
      border 1px solid #0C0C0C
      color #fff
  .show-box
    border 1px solid
    width 90%
    height 400px
    margin 50px auto
</style>